<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5AA4AE;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }

    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid consectetur dignissimos dolor eaque
            fuga ipsum laboriosam molestias mollitia nostrum odit officiis pariatur placeat provident repellat tempora
            tenetur unde, voluptatibus.
        </div>
        <div>Alias aliquam consequatur deserunt enim excepturi explicabo fugit, illum itaque laborum magnam, natus
            obcaecati officiis pariatur placeat quam quasi qui reiciendis repellat repellendus reprehenderit,
            repudiandae saepe totam voluptas voluptate voluptatibus.
        </div>
        <div>Ex, nostrum, totam. A, atque beatae consequuntur corporis debitis deleniti dolor ea esse, est illo in
            itaque nulla odio officiis possimus, qui quod unde! Facere impedit incidunt modi natus obcaecati!
        </div>
        <div>Ipsa, omnis, voluptate? Dolor esse, excepturi magnam natus nobis omnis perspiciatis quae tenetur! Atque
            dicta, est numquam odit porro quam! Ad culpa dolores fuga fugit iure laborum quasi sint unde.
        </div>
        <div>Asperiores aspernatur, eaque eum in, ipsa iste iusto laboriosam mollitia praesentium quas quia ratione,
            rerum tempore! Ad assumenda dolores enim eum iste perspiciatis quas quos, suscipit tenetur ut vel voluptas?
        </div>
        <div>Adipisci alias aspernatur consequatur, corporis cum doloremque doloribus error excepturi harum hic illum
            iusto laboriosam maiores nisi nostrum nulla odio placeat porro qui rerum sint sit soluta tempora temporibus
            vel.
        </div>
        <div>Aliquid assumenda blanditiis ea, et minima minus praesentium saepe tempore! Aperiam corporis eius esse ex
            ipsum, mollitia, nesciunt, nobis nulla odio odit praesentium quia quo repudiandae suscipit temporibus!
            Corporis, dolor.
        </div>
        <div>Aut, cum dolor doloremque ea earum eum ex, excepturi expedita explicabo harum, illo maxime mollitia nemo
            nulla numquam obcaecati odit pariatur perspiciatis placeat quisquam saepe unde vitae? In, quia, soluta?
        </div>
        <div>Ab inventore itaque laudantium nam omnis tempore voluptatum. Assumenda beatae excepturi, expedita harum
            ipsam magni necessitatibus officiis quae repellendus reprehenderit soluta voluptate. At dolor, eum harum
            ipsum necessitatibus sint ut!
        </div>
        <div>Adipisci aliquid, aspernatur deleniti dolores est vero voluptas. Adipisci aliquid aperiam aspernatur dicta
            eveniet fugiat iste itaque obcaecati odio pariatur porro quaerat quasi sint sunt, veniam vitae voluptate
            voluptates, voluptatibus!
        </div>
        <div>A ab aliquid asperiores, consectetur cupiditate dicta dignissimos eligendi error esse est fugit harum id
            laudantium molestias necessitatibus nemo nulla obcaecati perspiciatis praesentium quaerat quas quibusdam
            repellendus soluta unde vero.
        </div>
        <div>Aliquam magni natus provident voluptate voluptates! Dignissimos odio quas unde vero! Aliquam doloribus
            ducimus earum illum porro, possimus temporibus. At consectetur consequuntur cum error magni minima omnis
            pariatur quae, quidem.
        </div>
        <div>Architecto blanditiis commodi, cum dicta fuga id illo maiores qui vitae voluptates. At dignissimos id
            provident rerum totam. Aliquid aperiam autem corporis culpa excepturi exercitationem perspiciatis possimus
            repudiandae temporibus voluptate.
        </div>
        <div>Animi aperiam ea error exercitationem illo ipsum, laudantium maxime obcaecati, officiis placeat
            reprehenderit ullam? Culpa ea excepturi laboriosam magnam molestias officia, tenetur. Doloribus illum iste
            perferendis porro quidem tenetur voluptatibus!
        </div>
        <div>Aliquam, cumque cupiditate dolore expedita explicabo facere harum iusto nam, numquam perspiciatis provident
            quae, quas veritatis. Earum eum eveniet, illo illum magni maiores neque provident, quasi ratione repellendus
            vel voluptates.
        </div>
        <div>Ad adipisci assumenda autem culpa dolores, doloribus eaque expedita ipsam nobis odit perspiciatis provident
            repellat veniam? Aspernatur aut blanditiis, cupiditate eos impedit, ipsum nam odio recusandae reprehenderit
            sit vero voluptate.
        </div>
        <div>Accusantium ad adipisci aliquid animi autem consectetur deserunt earum eos impedit inventore ipsum itaque
            maiores minus molestiae necessitatibus quaerat quasi qui quia quo, saepe similique tempore tenetur totam vel
            voluptas?
        </div>
        <div>Aperiam blanditiis consequuntur facere fugiat hic ipsa reiciendis rerum veritatis! Accusantium, eum, velit!
            Ad, atque blanditiis esse est et expedita illum nam neque numquam, officiis quia quo tenetur velit vitae?
        </div>
        <div>Ab blanditiis consequatur cupiditate delectus, deleniti dignissimos eaque eligendi eos expedita facere
            facilis, fugit illo impedit laboriosam magnam minima modi mollitia nemo nulla obcaecati optio quis
            reiciendis tempore voluptas voluptates?
        </div>
        <div>Alias, assumenda atque dolorum et modi nostrum perspiciatis, praesentium quae repellat sed similique
            tempore! Adipisci, at blanditiis commodi cum doloribus ducimus ea, illum incidunt maiores, maxime odit quia
            quidem sequi.
        </div>
        <div>Ad aperiam error hic sapiente. Beatae cum cumque explicabo inventore iusto, laboriosam mollitia odit
            officiis soluta! Autem debitis expedita mollitia recusandae saepe. Asperiores consectetur dicta dolorem eum
            in inventore quis?
        </div>
        <div>Architecto eum illo illum in ipsa nihil nobis obcaecati officiis quae quasi quis quo quos recusandae rerum
            sit, voluptas voluptatum! Dicta ex, incidunt iure laborum magnam nam possimus quisquam soluta?
        </div>
        <div>Ad cum cumque delectus deserunt ea est fugiat ipsam iste nesciunt, nobis officia omnis possimus praesentium
            qui quidem repudiandae tempora ullam vel voluptatem voluptates. Fugiat modi neque nihil quam tempore?
        </div>
        <div>Aspernatur autem cum reiciendis saepe voluptatibus. Error facilis, molestiae molestias mollitia natus
            ratione recusandae? Consequatur, earum eligendi, illo, magnam nam nesciunt obcaecati quaerat quia quibusdam
            repellat soluta suscipit velit voluptates?
        </div>
        <div>Adipisci aliquam atque blanditiis corporis doloribus, earum esse est facere incidunt ipsam laboriosam
            molestiae nulla odio perferendis quasi reiciendis velit. Consectetur, corporis error et fugiat magni quaerat
            quam quo sapiente.
        </div>
        <div>Adipisci at autem consequatur cupiditate dolor earum error eveniet fugit incidunt itaque, iusto mollitia
            nesciunt, nihil numquam officiis pariatur praesentium quas qui quo ratione rem vitae voluptas voluptatibus.
            Illum, sapiente!
        </div>
        <div>Accusamus accusantium, ad debitis distinctio ducimus fugiat, fugit harum minima modi quam quasi temporibus
            vel? Deserunt dolorum enim, in laboriosam laudantium molestiae nemo nobis odio provident quo sint tenetur,
            totam.
        </div>
        <div>Ab delectus explicabo porro quaerat tempore! Cumque nihil non omnis! Accusamus architecto at commodi culpa
            est iste iure iusto libero minus mollitia necessitatibus nobis quaerat sed tenetur unde, vero voluptatum.
        </div>
        <div>Accusantium amet aspernatur blanditiis culpa hic impedit in ipsam iste, itaque labore, nostrum quia quod
            ratione rem tenetur ut veniam voluptates voluptatum? Beatae cupiditate enim fugit quas quidem, sed
            voluptatem!
        </div>
        <div>Alias corporis dicta, dignissimos dolor dolores ea eaque excepturi facilis maiores nam neque nihil nostrum
            quas reiciendis repellendus suscipit voluptatum. Cupiditate eos eum excepturi molestias nemo nesciunt
            nostrum nulla tempore?
        </div>
        <div>Cumque error eum libero repellat! Architecto assumenda aut beatae commodi debitis dolorum error eum fuga
            mollitia, nemo nesciunt omnis praesentium qui quibusdam ratione sed, sequi tenetur vel veniam vero,
            voluptates.
        </div>
        <div>Architecto at cupiditate ducimus earum eveniet quas, quidem quisquam rerum voluptatum! Accusamus alias
            consequuntur delectus explicabo facilis illum, laboriosam nesciunt non officia perspiciatis quibusdam
            quisquam sed suscipit temporibus veritatis voluptas.
        </div>
        <div>Ipsum laborum minima molestias quasi recusandae soluta. Autem esse quasi sequi. Accusantium, deleniti eos
            expedita minima nesciunt porro possimus repellendus vitae? Distinctio dolor ducimus expedita molestiae
            numquam, qui quis voluptates.
        </div>
        <div>Aut blanditiis cupiditate deleniti harum iusto nam necessitatibus nostrum odio officia optio perferendis,
            quidem reiciendis repudiandae sint sunt temporibus unde. Animi dignissimos, dolore dolores harum in laborum
            porro saepe! Iure.
        </div>
        <div>Assumenda eos officiis omnis repudiandae? Aliquam aspernatur dolorem id incidunt molestiae necessitatibus
            nemo, quasi quis quo, tempora tenetur, vero! Alias debitis dolorem ducimus id itaque, natus nesciunt quasi
            sit voluptatibus!
        </div>
        <div>Earum in quo voluptatibus. Adipisci aut dolor eum facere libero modi molestiae nesciunt, vero voluptatem.
            Amet assumenda dolorem fuga in, laudantium perspiciatis quae quasi quo sint. Eius nesciunt pariatur
            veritatis!
        </div>
        <div>Ab cum dolorum eaque error esse eveniet nobis obcaecati pariatur placeat, porro qui quis quod recusandae
            sint ullam vel voluptatibus. Accusantium ducimus exercitationem fugit itaque molestiae nemo quos similique,
            voluptates.
        </div>
        <div>Architecto explicabo rem sapiente vel? Eos excepturi explicabo, itaque magnam molestias nam nesciunt
            perferendis quas? Aperiam dignissimos doloribus eaque facilis, illum incidunt laborum minima nulla quaerat
            quidem, soluta tempora ullam?
        </div>
        <div>Animi beatae consectetur cum dicta dolorem dolores, doloribus est eum facere id impedit ipsum iusto
            laudantium modi molestias mollitia nihil odit quas quisquam, repudiandae soluta tenetur voluptate
            voluptates? Quisquam, voluptate.
        </div>
        <div>Ad aperiam, architecto dolor eaque error et facilis ipsum nesciunt nostrum reiciendis sequi sunt vel velit
            voluptatem voluptates? Doloremque necessitatibus nostrum officiis pariatur soluta sunt tenetur! At fugiat
            illum soluta.
        </div>
        <div>Accusamus accusantium asperiores consequuntur distinctio facilis id illum, magni modi natus odio provident
            veritatis! Blanditiis facere maxime numquam provident quisquam repudiandae sunt vel? Commodi corporis eaque
            harum minima vitae. Perferendis.
        </div>
        <div>Accusantium cum dolores error in incidunt libero reprehenderit repudiandae! Ad atque corporis eaque error
            ex explicabo, harum iste, itaque labore maxime molestiae molestias mollitia, nesciunt reprehenderit sint
            soluta unde vel?
        </div>
        <div>Aliquid autem minus neque quidem quis quod sequi. Aliquid dolore esse illo illum, in laborum odio sequi
            sunt. Hic laudantium molestiae molestias neque officia sunt temporibus tenetur? Id perspiciatis,
            voluptatibus.
        </div>
        <div>Ab aliquid autem beatae consequatur error et fugit harum illo incidunt neque nulla officia officiis quaerat
            qui, repellat reprehenderit repudiandae similique, sit suscipit temporibus. Amet culpa hic nemo perspiciatis
            similique!
        </div>
        <div>Ab, corporis cum cupiditate dolor et ex, illum nobis odio odit porro quas quidem quisquam rem rerum
            voluptatem. Ad aspernatur dolore eos excepturi facere id labore laborum maxime rem. Voluptas.
        </div>
        <div>Dolor explicabo labore praesentium qui. Ad adipisci, aliquid animi aperiam cumque deserunt expedita fugiat
            hic ipsa itaque nisi officiis pariatur porro praesentium quam quia quidem, quisquam ratione saepe, sint
            vero!
        </div>
        <div>Error, omnis, vel. Commodi consectetur consequuntur corporis culpa distinctio in repellendus vitae! Impedit
            incidunt ipsa tenetur voluptatem. Autem, eius eum exercitationem illo laborum minima quaerat quas
            repudiandae ullam vel voluptatem.
        </div>
        <div>Ab debitis ducimus ea enim, natus placeat sequi tenetur veritatis. Accusamus alias culpa delectus eligendi
            eum ex minima nobis perferendis quam, ratione sed similique suscipit totam veniam veritatis vitae
            voluptatum?
        </div>
        <div>Ab adipisci aliquid autem cum, cumque cupiditate ea earum esse harum iure iusto libero nemo nisi nobis
            provident quae, quisquam recusandae repellat sit temporibus ullam unde veniam? Atque, suscipit veniam.
        </div>
        <div>Consectetur culpa esse illo impedit laudantium magni nihil quibusdam reiciendis reprehenderit similique sit
            veritatis, voluptatem voluptatibus. Dicta dignissimos ducimus enim error ex impedit, inventore ipsa
            laudantium nisi, qui temporibus unde!
        </div>
    </div>
</body>
</html>